                  <!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <!-- SCRIPTS -->
    <script type="text/javascript" src="/mes/static/js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="/mes/static/js/jquery.zlight.menu.1.0.min.js"></script>

    <!-- STYLES -->
    <link href="/mes/static/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link rel="stylesheet" href="/mes/static/css/font-awesome.min.css" media="screen">
    <link rel="stylesheet" href="/mes/static/css/style.css" media="screen">
    <link rel="stylesheet" href="/mes/static/css/zlight.menu.css" media="screen">
    <style>
        select{
            width: auto;
            padding: 0 2%;
            height:40px;
            line-height:30px;

        }
        option{
            text-align:center;
        }

        #img{
            border: 1px none #000;
            display: block;
        }
        canvas 	{ background-color:transparent; border: 2px solid deepskyblue; top: 0; left: 0; position:absolute;}
        canvas.resize-ne { cursor: ne-resize; }
        canvas.resize-se { cursor: se-resize; }
        canvas.resize-sw { cursor: sw-resize; }
        canvas.resize-nw { cursor: nw-resize; }
        canvas.move { cursor: move; }
        canvas.default { cursor: default; }
        <!--
        body {
            background-color:lightyellow;
            margin-left: 0px;
            margin-top: 0px;
            margin-right: 0px;
            margin-bottom: 0px;
        }
        .mini{width:380px; height:380px; margin:0px auto;}
    </style>
    <script type="text/javascript" src="/mes/static/js/fabric.js"></script>
    <script type="text/javascript" src="/mes/static/js/layer.js"></script>
    <script type="text/javascript">

        $(document).ready(function() {

            $('#zlight-nav').zlightMenu();
        });
        var resData;

        window.add
        var part1;
        var part2;
        var part3;
        var part4;
        var part5;
        var part6;
        var part7;
        var part8;
        var angle = new Array();
        window.onload = function() {

            var canvas = this.__canvas = new fabric.Canvas('canvid1');
            fabric.Object.prototype.transparentCorners = true;
            fabric.Object.prototype.borderColor = 'rgba(255,0,0,1.0)';
            fabric.Object.prototype.hasBorders = true;
            fabric.Object.prototype.cornerColor = 'rgba(255,0,0,1.0)';
            fabric.Object.prototype.cornerSize = 15;
            angle[0] = 0;
            angle[1] = 0;
            angle[2] = 0;
            angle[3] = 0;
            angle[4] = 0;
            angle[5] = 0;
            angle[6] = 0;
            angle[7] = 0;

            part1 = new fabric.Triangle({
                width: 64, height: 32, left: 280-31, top: 113-15.5,
                fill: 'rgba(132, 0, 132,1.0)'
            });
            part1.angle = 0;

            part2 = new fabric.Triangle({
                width: 92, height: 46, left: 96-31, top: 180-15.5,
                fill: 'rgba(255, 128, 255,1.0)'
            });
            part2.angle = 0;
            part3 = new fabric.Rect({
                width: 46, height: 46, left: 144-62.5, top: 181-31.25,
                fill: 'rgba(0, 255, 0,1.0)',
                centerdScaling:true
            });
            part3.angle = 0;
            part4 = new fabric.Triangle({
                width: 128, height:64,left:  323-62.5, top: 178-31.25, fill: 'rgba(255, 255, 0,1.0)'
            });
            part4.angle = 0;
            part5 = new fabric.Triangle({
                width: 128, height: 64, left: 170-22.5, top: 77-22.5, fill: 'rgba(102, 0, 0,1.0)'
            });
            part5.angle = 0;
            //width：92,height：32
            part6 = new fabric.Polygon([{x:64,y:245},{x:96,y:216},{x:96,y:155},{x:64,y:184}],{fill:'rgba(0, 0, 255,1.0)'});
            part6.angle = 0;

            part7 = new fabric.Triangle({
                width: 64, height: 32, left: 152-44, top: 216-22.5,
                fill: 'rgba(255, 0, 0,1.0)'
            });
            part7.angle = 0;
            part8 = new fabric.Polygon([{x:24,y:216},{x:56,y:245},{x:56,y:184},{x:24,y:155}],{fill:'rgba(255, 255, 0,1.0)'});
            canvas.add(part1, part2, part3, part4, part5,part6,part7);
            canvas.on({
                'object:moving': onChange,
                'object:scaling': onChange,
                'object:rotating': onChange,
            });
            var res = document.getElementById("resLabel");

            onChange(part7);
            function onChange(options) {

                if(part1.angle>180)
                {
                    angle[0] = 360-part1.angle;
                }
                else
                {
                    angle[0] = -part1.angle;
                }
                if(part2.angle>180)
                {
                    angle[1] = 360-part2.angle;
                }
                else
                {
                    angle[1] = -part2.angle;
                }
                if(part3.angle>180)
                {
                    angle[2] = 360-part3.angle;
                }
                else
                {
                    angle[2] = -part3.angle;
                }
                if(part4.angle>180)
                {
                    angle[3] = 360-part4.angle;
                }
                else
                {
                    angle[3] = -part4.angle;
                }
                if(part5.angle>180)
                {
                    angle[4] = 360-part5.angle;
                }
                else
                {
                    angle[4] = -part5.angle;
                }
                if(part6.angle>180)
                {
                    angle[5] = 360-part6.angle;
                }
                else
                {
                    angle[5] = -part6.angle;
                }
                if(part7.angle>180)
                {
                    angle[6] = 360-part7.angle;
                }
                else
                {
                    angle[6] = -part7.angle;
                }

                res.innerHTML = parseInt(part1.getCenterPoint().x)+","+parseInt(part1.getCenterPoint().y)+","+parseInt(angle[0])
                    +"||"+parseInt(part2.getCenterPoint().x)+","+parseInt(part2.getCenterPoint().y)+","+parseInt(angle[1])
                    +"||"+parseInt(part3.getCenterPoint().x)+","+parseInt(part3.getCenterPoint().y)+","+parseInt(angle[2])
                    +"||"+parseInt(part4.getCenterPoint().x)+","+parseInt(part4.getCenterPoint().y)+","+parseInt(angle[3])
                    +"||"+parseInt(part5.getCenterPoint().x)+","+parseInt(part5.getCenterPoint().y)+","+parseInt(angle[4])
                    +"||"+parseInt(part6.getCenterPoint().x)+","+parseInt(part6.getCenterPoint().y)+","+parseInt(angle[5])
                    +"||"+parseInt(part7.getCenterPoint().x)+","+parseInt(part7.getCenterPoint().y)+","+parseInt(angle[6]);

                canvas.forEachObject(function(obj) {
                });
            }

        }

    </script>
</head>
<body>
<table  style="width: 100%;">
    <tr>
        <td>
            <div id="apDiv2leftH" style="text-align: center;margin-bottom: 5px">
                <input type="text" name="userName" id="edit_userName" class="text" readonly style="border:0px solid red;" />
                <br/>
                <div id="my_painter" class="mini">
                    <canvas id="canvid1" tabindex="0" width="380" height="380">
                    </canvas>
                </div>
            </div>
            <div id="apDiv2rightH" style="text-align: center;margin-top: 5px">

                <input type="text" name="status" id="edit_status" class="text" style="display:none;" />
                <input type="button" class="btn btn-success" style="width: 150px" onclick="JigsawTask()" value="七巧板拼图"/><br/>
                <label id="resLabel" />

            </div>
        </td>
    </tr>
</table>
<script type="text/javascript" src="/mes/static/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/mes/static/js/respond.min.js"></script>
</body>
                  </html>
